<template>
  <div>
    <div class='postContainer'>
      <div style="width:100%;height:500px" ref="chart"></div>
      <div style="width:100%;height:500px" ref="charts"></div>
    </div>
    <div class="postContainer">
      <div style="width:100%;height:500px" ref="pieChart"></div>
      <div style="width:100%;height:500px"></div>
    </div>

  </div>

</template>
<script>

  function genData(count) {
    var nameList = [
      '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
    ];
    var legendData = [];
    var seriesData = [];
    var selected = {};
    for (var i = 0; i < 50; i++) {
     let name = Math.random() > 0.65
        ? makeWord(4, 1) + '·' + makeWord(3, 0)
        : makeWord(2, 1);
      legendData.push(name);
      seriesData.push({
        name: name,
        value: Math.round(Math.random() * 100000)
      });
      selected[name] = i < 6;
    }

    return {
      legendData: legendData,
      seriesData: seriesData,
      selected: selected
    };

    function makeWord(max, min) {
      var nameLen = Math.ceil(Math.random() * max + min);
      var name = [];
      for (var i = 0; i < nameLen; i++) {
        name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
      }
      return name.join('');
    }
  }

export default{
    data(){
        return{

          echarts1_option: {
//需要的话下面内容copy到主体代码块即可
            backgroundColor: '#45515a',
            //标题
            title: {
              text: '流量来源',
              subtext: '饼图示例',
              left: 'center',
              top: 20,
              textStyle: {
                color: '#ccc',
                fontStyle: 'italic'//标题字体
              }
            },
            //弹窗，响应鼠标指向，显示具体细节
            tooltip: {
              trigger: 'item',//以具体项目触发弹窗
              /*
              内容格式器，一共有abcd四个代号，例如在饼图中，{a}指系列，即流量来源，{b}指数据项目，如搜索引擎，{c}指数值，如
              value，{d}百分比。{x}本身代表了相应字符，可以和其他字符拼凑，在弹窗中显示
              */
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //图例，选择要显示的项目
            legend: {
              orient: 'vertical',
              left: 'left',
              textStyle: {
                color: '#c8c8d0'
              },
              data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎','测试数据']  //注意要和数据的name相对应
            },
            //工具箱
            toolbox: {
              show: true,//显示工具箱
              feature: {
                dataView: {show: true}, //以文字形式显示数据
                restore: {show: true},   //还原
                //dataZoom:{show:true}, //区域缩放
                saveAsImage: {show: true},  //保存图片
                //magicType:{type:['line','bar']}//动态数据切换，数据显示可以在该规定内容中切换显示方式，
              }
            },
            //视觉映射组件，将数据映射到视觉元素上
            visualMap: {
              show: false,
              min: 10,
              max: 650,
              dimension: 0, //选取数据的维度，如人数据：[身高，体重]，则1代表将体重进行映射，默认值为数组的最后一位
              // seriesIndex: 4, //选取数据集合中的哪个数组，如{一班}，{二班}，默认选取data中的所有数据集
              inRange: {
                //选定了要映射的对象，用inRange详细写要渲染的具体细节，[x，y]中x指最小值对应的量（亮度，饱和度等），y指最大值对应的量，其余的按各自value线性渲染
                color: ['red'],
                colorLightness: [0, 1],
                colorSaturation: [0, 1]
              }
            },
//数据
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                  {value: 335, name: '直接访问'},
                  {value: 310, name: '邮件营销'},
                  {value: 274, name: '联盟广告'},
                  {value: 235, name: '视频广告'},
                  {value: 400, name: '搜索引擎'},
                  {value: 450, name: '测试数据'}
                ].sort(function (a, b) {
                  return a.value - b.value;
                }),
                roseType: 'radius',//角度和半径展现百分比，'area'只用半径展现
                label: { //饼图图形的文本标签
                  normal: {  //下同，normal指在普通情况下样式，而非高亮时样式
                    textStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    }
                  }
                },
                labelLine: {  //引导线样式
                  normal: {
                    lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.5, //0-1，越大越平滑弯曲
                    length: 10,  //从块到文字的第一段长
                    length2: 20  //拐弯到文字的段长
                  }
                },
                itemStyle: { //图例样式
                  normal: {
                    color: '#97413c',
                    shadowBlur: 50,//阴影模糊程度
                    shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色，一般黑
                  }
                },

                animationType: 'scale', //初始动画效果，scale是缩放，expansion是展开
                animationEasing: 'elasticOut', //初始动画缓动效果
                animationDelay: function (idx) {  //数据更新动画时长，idx限定了每个数据块从无到有的速度
                  return Math.random() * 200;
                }
              }
            ]

          }

        }
    },
    filters: {

    },
    created(){

    },
  mounted(){
    this.initCharts()
    this.chartDisplay()
    this.pieChart()
  },
    methods: {
      initCharts () {
        let myChart = this.echarts.init(this.$refs.chart);
        // console.log(this.$refs.chart)
        // 绘制图表
        myChart.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {

          },
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      },
      chartDisplay(){
        let Chart = this.echarts.init(this.$refs.charts);
        let option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        };
       Chart.setOption(option)

      },
      pieChart(){
        let Chart = this.echarts.init(this.$refs.pieChart);
        Chart.setOption(this.echarts1_option)
      },



    },
}
</script>

<style lang="scss" scoped>
 .postContainer{
  display: flex;
   justify-content: space-between;

 }
</style>
